<template>
  <div class="multi-player">

    <div ref="container" class="container h100" :style="{ width: width }"></div>

  </div>
</template>

<script>
import {
  startPlay,
  stopPlay,
  getStreaminfo,
  playback,
  playbackPause,
  playbackReplay,
  playbackSeek,
  playbackSpeed,
  playbackStop,
} from '@/api/iot/channel';
import { getDevRecord } from "@/api/iot/record";
import { ptzdirection, ptzscale } from '@/api/iot/sipdevice';

export default {
  name: 'MultiPlayer',
  mixins: [],
  components: {},
  props: {
    //布局类型：1 2 4 5 3-1 4-1
    split: {
      type: [Number, String],
      default: 1,
    },
    videoParam: {
      type: Object,
      default: function () {
        return null;
      },
    },
    //宽度
    width: String,
  },
  data() {
    return {
      replayActive: false,
      dSplit:0,
      streamIds:[],
      chooseWin:null,
      playWinList:[]
    };
  },
  computed: {},
  watch: {
      dSplit:{
          handler:function(){
              this.updateSplit();
          }
      },
    videoParam: {
      handler: function (n, o) {
        this.play();
      },
      deep: true,
    },
    width: {
      handler: function (n, o) {
        this.$nextTick(() => {
          this.create();
        });
      },
    },
  },
  created() {},
  mounted() {
    this.create();
  },
  beforeDestroy() {
    //   this.playWinList.forEach((item)=>{
    //       this.stopPlay(item.streamId);
    //   });
  },
  methods: {
    create() {
      this.$jessibuca && this.$jessibuca.destroy();
      const jessibucaMulti = new JessibucaProMulti({
        container: this.$refs.container,
        videoBuffer: 0.1, // 缓存时长
        videoBufferDelay: 0.2, //
        decoder: '/js/jessibuca-pro/decoder-pro.js',
        split: this.split,
        isResize: false,
        isFlv: true,
        debug: false,
        useMSE: false,
        useSIMD: true,
        debugLevel: 'debug',
        hasAudio: false,
        showBandwidth: true, // 显示网速
        showPerformance: false, // 显示性能
        showPlaybackOperate:true,
        operateBtns: {
          fullscreen: true,
          screenshot: true,
          play: true,
          audio: true,
          record: true,
          ptz: true,
        //   quality: true,
          performance: true,
        },
        ptzClickType: 'mouseDownAndUp',
        ptzZoomShow:true,
        // ptzMoreArrowShow: true,
        // ptzApertureShow: true,
        // controlHtml: '<div>我是 <span @click="updateSplit(2)" style="color: red">test</span>文案</div>'
        // qualityConfig: ['720P', '1080P', '4K'],
        extendOperateBtns:[{
            name:'1',
            index:0,
            iconTitle:'一分屏',
            icon:'',
            iconHover:''
            ,click:()=>{
                this.dSplit = 1
            }
        },{
            name:'4',
            index:1,
            iconTitle:'四分屏',
            icon:'',
            iconHover:''
            ,click:()=>{
                this.dSplit = 2
            }
        },{
            name:'9',
            index:2,
            iconTitle:'九分屏',
            icon:'',
            iconHover:''
            ,click:()=>{
                this.dSplit = 3
            }
        }]
      });

      jessibucaMulti.on('ptz', (index, d) => {
          console.log(d)

        switch (d) {
          case 'up':
            this.ptzDirection(0, 1,index);
            break;
          case 'down':
            this.ptzDirection(0, 2,index);
            break;
          case 'left':
            this.ptzDirection(2, 0,index);
            break;
          case 'right':
            this.ptzDirection(1, 0,index);
            break;
          case 'zoomExpand':
            this.ptzScale(1,index);
            break;
          case 'zoomNarrow':
            this.ptzScale(2,index);
            break;
          case 'stop':
            this.ptzDirection(0, 0,index);
            this.ptzScale(0,index);
            break;


        }
      });

      this.$jessibuca = jessibucaMulti;
      this.$jessibuca2 = jessibuca;
    },
    updateSplit() {
      this.$jessibuca && this.$jessibuca.arrangeWindow(this.dSplit);
    },
    /** 直播 */
    async play() {
      if (this.videoParam?.deviceId && this.videoParam?.channelId) {
        await startPlay(this.videoParam.deviceId, this.videoParam.channelId);
        const response = await getStreaminfo(
          this.videoParam.deviceId,
          this.videoParam.channelId
        );
        let res = JSON.parse(response.data);
        console.log('playurl：' + res.playurl);
        //存储流数组，方便统一停止流
        this.streamId = res.streamId;
        //存储播放状态的窗口
        this.playWinList.push({
            index:this.$jessibuca.getSelectedWindowIndex(),
            deviceId:this.videoParam.deviceId,
            channelId:this.videoParam.channelId,
            streamId:res.streamId
        });
        res.playurl && this.$jessibuca.play(res.playurl);
      }
    },
    /** 停止播放直播 */
    async stopPlay(streamId){
        stopPlay(this.videoParam.deviceId, this.videoParam.channelId, streamId)
    },
   /** 方向控制 */
    ptzDirection(leftRight, upDown,index) {
      var data = {
        leftRight: leftRight,
        upDown: upDown,
        moveSpeed: 125,
      };
      let curWin = this.playWinList.find(item=>item.index==index);
      if(curWin){
        ptzdirection(curWin.deviceId, curWin.channelId, data);
      }
    },
    //缩放控制
    ptzScale: function (inOut,index) {
      console.log('云台缩放：' + inOut);
      var data = {
        inOut: inOut,
        scaleSpeed: 30
      }
      let curWin = this.playWinList.find(item=>item.index==index);
      ptzscale(curWin.deviceId, curWin.channelId, data)
    },
  },
};
</script>
<style lang="scss" scoped>
.container{
    background: rgba(13, 14, 27, 0.7)
}
</style>
